<template>
  <a-modal
    class="productManage"
    :visible="visible"
    :title="'选择门店机构'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="900px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div class="searchBox">
      <a-input
        placeholder="请输入门店/机构名称"
        style="width: 200px"
        v-model="searchParams.searchName"
      />
      <a-button
        type="primary"
        style="margin-left: 10px"
        @click="onSearch('shopName')"
        :loading="tableLoading"
      >
        搜门店
      </a-button>
      <a-button
        type="primary"
        style="margin-left: 10px"
        @click="onSearch('orgName')"
        :loading="tableLoading"
      >
        搜机构
      </a-button>
      <a-button
        style="margin-left: 10px"
        @click="resetSearch"
        :loading="tableLoading"
        >重置</a-button
      >
    </div>
    <div>
      <a-spin tip="Loading..." :spinning="tableLoading">
        <a-table
          :row-selection="rowSelection"
          :columns="columns"
          :data-source="dataSource"
          :rowKey="'shopId'"
          :pagination="pagination"
          @change="handleTableChange"
        ></a-table>
      </a-spin>
    </div>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: "productManage",
  props: {
    shopIdList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      selectedRows: [],
      selectedRowKeys: [],
      rowSelection: {
        selections: true,
        selectedRowKeys: [],
        onChange: (item, val) => {
          this.selectedRows = val;
          this.rowSelection.selectedRowKeys = item;
          this.selectedRowKeys = item;
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${total}条`,
      },
      dataSource: [],
      alist: [],
      columns: [
        {
          title: "店铺名称",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
        },
        {
          title: "店长",
          dataIndex: "peopleName",
          key: "peopleName",
        },
      ],
      searchParams: {
        searchName: "",
      },
      tableLoading: false,
      params: {},
    };
  },
  methods: {
    // 确定提交
    handleSubmit() {
      this.confirmLoading = true;
      const { selectedRows, alist } = this;
      // 商品提交
      let obj = {};
      const newArr = selectedRows.reduce((item, n) => {
        // eslint-disable-next-line no-unused-expressions
        obj[n.shopId] ? "" : (obj[n.shopId] = true && item.push(n));
        return item;
      }, []);
      let arr = Array.from(new Set(alist));
      let selectArr = arr.map((item) => {
        for (let i = 0, length = newArr.length; i < length; i++) {
          if (newArr[i].shopId == item) {
            return newArr[i];
          }
        }
      });
      let ids = [];
      selectArr.forEach((item) => {
        ids.push(item.shopId);
      });
      this.$emit("confirmGoodList", ids);
      this.visible = false;
      this.searchParams.searchName = "";
      this.params = {};
    },
    // 取消
    closeModal() {
      this.visible = false;
      this.searchParams.searchName = "";
      this.params = {};
      this.$emit("cancel", false);
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.getGoodsList();
    },
    handleSearch() {
      console.log(this.shopIdList);
      this.alist = this.shopIdList;
      this.selectedRows = this.shopIdList.map((item) => {
        return {
          shopId: item,
        };
      });
      this.rowSelection = {
        type: "checkbox",
        selections: true,
        selectedRowKeys: this.alist,
        onChange: (item, val) => {
          this.selectedRows = this.selectedRows.concat(val);
          // this.selectedRows = val;
          this.rowSelection.selectedRowKeys = item;
          // this.alist = Array.from(new Set(this.alist.concat(item)));
          this.alist = item;
          // this.selectedRowKeys = item;
        },
        // onSelect: this.onTableTreeSelect,
        getCheckboxProps: (record) => ({
          props: {
            defaultChecked: this.alist.includes(record.shopId),
          },
        }),
      };
      this.getGoodsList();
    },

    async getGoodsList() {
      this.tableLoading = true;
      let res = await this.$post("shop/queryShops", {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        // ...this.searchParams,
        ...this.params,
      });
      if (res && res.returnCode == 1000) {
        if (res.dataInfo != null) {
          this.dataSource = res.dataInfo.records;
          this.pagination.total = res.dataInfo.total;
        }
      }
      this.tableLoading = false;
    },
    onSearch(e) {
      this.params = {};
      this.params[e] = this.searchParams.searchName;
      this.getGoodsList();
    },
    resetSearch() {
      this.searchParams.searchName = "";
      this.params = {};
      this.getGoodsList();
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.pagination.current = 1;
        this.handleSearch();
      }
    },
  },
};
</script>

<style scoped lang="less">
.searchBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>

